<template>
  <div class="business-plan-list-view view-container">
    <div class="header">
      <div style="margin-left:20px;">编码规则</div><i class="el-icon-question" style="margin-left:10px" />
    </div>
    <div class="main-content">
      <div v-for="(item,index) in listData" :key="index">
        <el-form size="small" :inline="true" label-position="right" class="demo-form-inline" label-width="110px">
          <el-form-item :label="getLabel('ruleCode',String(item.seqType))">
            <el-radio v-model="item.Type" label="0" :disabled="!item.isCustom">手动输入</el-radio>
            <el-radio v-model="item.Type" label="1" :disabled="!item.isCustom">自动生成</el-radio>
          </el-form-item>
          <el-form-item>
            <el-input v-model="item.expr" placeholder="GYS-$流水号$" style="width:400px" />
          </el-form-item>
          <el-form-item>
            <el-button v-auth="{v:['crm:system:code:pms']}" size="text" @click="reset(item)">设置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <edit ref="editChangeDialog" :title="title" @success="success" />
  </div>
</template>

<script>
import {useRouter} from 'vue-router'
import {crmStore} from '@CRM/store'
import {defineAsyncComponent, defineComponent, getCurrentInstance, inject, onMounted, reactive, ref} from 'vue'

export default defineComponent({
  components: {
    edit: defineAsyncComponent(() => import('../coderule/modules/edit.vue'))
  },
  setup(props, context) {
    const currentInstance = getCurrentInstance()
    const api = inject('api')

    const router = useRouter()
    const editChangeDialog = ref(null)
    var formData = reactive({
      radio1: '',
      expr: '',
    })
    var title = ref('')
    const reset = (val) => {
      editChangeDialog.value.open(val)
      title.value = '设置规则'
    }
    var listData = ref([])
    onMounted(() => {
      getList()
    })
    const ruleCode = crmStore.getters['dictionary/getDictionary']['ruleCode']
    const getList = () => {
      api.system.CODEROLE_LIST().then((res) => {
        console.log(res)
        if (res.code == 0) {
          res.data.forEach(item => {
            if (item.genType == true) {
              Object.assign(item, { Type: '1' })
            } else {
              Object.assign(item, { Type: '0' })
            }
          })
          listData.value = res.data
        }
      })
    }
    const success = () => {
      getList()
    }
    return {
      ruleCode,
      listData,
      currentInstance,
      api,
      router,
      formData,
      reset,
      title,
      editChangeDialog,
      getList,
      success
    }
  },
})
</script>
<style scoped>
.header{
    background-color: white;
  border-bottom: 1px solid #efefef;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  box-sizing: border-box;
}
</style>
